<template>

  <div class="title">
    <el-row>
      <el-col :span="5"><el-text tag="b" size="large" @click="showFatherData">这是一个标题啦</el-text></el-col>
      <el-col :span="18"><div class="grid-content ep-bg-purple-light" /></el-col>
    </el-row>
    <el-row>
      <el-col :span="12"><el-text>{{this.questionData}}</el-text></el-col>
      <el-col :span="12"><div class="grid-content ep-bg-purple-light" /></el-col>
    </el-row>
    <el-row>
      <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
      <el-col :span="8"><div class="grid-content ep-bg-purple-light" /></el-col>
      <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
      <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
      <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
      <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
    </el-row>
    <el-row>
      <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
      <el-col :span="4"><div class="grid-content ep-bg-purple-light" /></el-col>
      <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
      <el-col :span="4"><div class="grid-content ep-bg-purple-light" /></el-col>
      <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
      <el-col :span="4"><div class="grid-content ep-bg-purple-light" /></el-col>
    </el-row>
  </div>


</template>

<script>
import axios from "@/settings/axios";
export default {
  name: "Question",
  props: {
    questionData: {
      type: undefined,
      // 定义是否必须传
      required: false,
      // 定义默认值
      default: '暂无'
    },
  },
  // mounted() {
  //   console.log(this.questionData)
  // },
  methods:{
    showFatherData(){
      console.log(this.questionData)
    }
  },
  watch:{
    // questionData(nowVal,oldVal) {
    //   console.log(nowVal);
    //   oldVal;
    // },
    questionData:{
      deep: true,
      async handler(newVal,oldVal){
        console.log(newVal);
        oldVal;
        let params = {
          "content": "中国",
          "pageNo": 1,
          "pageSize": 10,
        };
        await axios.get("/shane_question/page_by_content",params);
      },
    }
  },

};
</script>

<style scoped>

</style>

<style lang="scss">
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.title{
  color: #E6A23C;
  border-color: #E6A23C;
  background-color: #FFFFFF;
  //box-shadow: var(--el-box-shadow-dark) inset 0 0  8px;
  border-radius: 12px;
  //border-top: 1px solid var(--el-border-color);
}
.title::before,
.title::after {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  z-index: -1;
}

.title::after {
  top: -12px;
  bottom: -12px;
  left: -12px;
  right: -12px;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
  z-index: -2;
}
</style>
